"use client"
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarProvider,
    SidebarTrigger
} from "@/components/ui/sidebar";
import UserInfoHeader from "@/components/page/user-info-header";
import NavItem from "@/app/(dashboard)/home/nav-item";
import {cn} from "@/lib/utils";
import layoutClsx from "@/app/(dashboard)/home/layout.module.css";
import React, {useState} from "react";
import {Users} from "@/lib/db/types";

export function AppSidebar({children,user}:{children:React.ReactNode,user:Omit<Exclude<Users,null>, "password"|"createdAt"|"updatedAt">}) {
    const [isOpen, setIsOpen] = useState(true);
    return (
        <>
            <SidebarProvider open={isOpen} onOpenChange={(open)=>{
                setIsOpen(open);
            }}>
                <Sidebar collapsible={"icon"}>
                    <SidebarHeader>
                        <UserInfoHeader user={user}/>
                    </SidebarHeader>
                    <SidebarContent>
                        <NavItem/>
                    </SidebarContent>
                    <SidebarFooter>
                        <SidebarTrigger/>
                    </SidebarFooter>
                </Sidebar>
                <div className={cn("w-full",layoutClsx.mainMaxWith)} >
                    <SidebarTrigger className={"block h-4 md:hidden ml-2 mt-2"}/>
                    <div className={"h-[calc(100%-1.5rem)] md:h-full"}>
                        {
                            children
                        }
                    </div>
                </div>
            </SidebarProvider>
        </>
    );
}
